<!--
  This file is a part of the open-eBackup project.
  This Source Code Form is subject to the terms of the Mozilla Public License, v. 2.0.
  If a copy of the MPL was not distributed with this file, You can obtain one at
  http://mozilla.org/MPL/2.0/.
  
  Copyright (c) [2024] Huawei Technologies Co.,Ltd.
  
  THIS SOFTWARE IS PROVIDED ON AN "AS IS" BASIS, WITHOUT WARRANTIES OF ANY KIND,
  EITHER EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO NON-INFRINGEMENT,
  MERCHANTABILITY OR FIT FOR A PARTICULAR PURPOSE.
  -->

<div class="aui-fullpage">
  <div class="aui-header-1 header-container">
    <lv-group lvGutter="8px">
      <h1>{{ 'system_sftp_label' | i18n }}</h1>
      <aui-multi-cluster-switch
        (onChange)="onChange()"
      ></aui-multi-cluster-switch>
    </lv-group>
    <div class="switch-container" *ngIf="!isDataBackup">
      <lv-switch
        [ngModel]="sftpSwitch"
        [lvControl]="true"
        [lvLoading]="loading"
        (click)="enableChange()"
        [lvDisabled]="loading"
        pmpermission
        pmOperation="OpenSFTPService"
      >
      </lv-switch>
    </div>
  </div>
  <div class="aui-block aui-paginator-container">
    <lv-group
      *ngIf="isDataBackup"
      [lvColumns]="['260px', 'auto']"
      lvGutter="16px"
      style="height: 100%;"
    >
      <lv-group lvDirection="vertical" lvGutter="16px" class="left-menus">
        <h2>{{ 'protection_statefulset_node_label' | i18n }}</h2>
        <lv-group lvGutter="8px">
          <lv-search
            [lvFocus]="true"
            [(ngModel)]="nodeName"
            (lvSearch)="search()"
            style="width: 212px;"
          >
          </lv-search>
          <button
            class="aui-button-icon"
            lv-button
            lvSize="auto"
            (click)="refresh()"
          >
            <i lv-icon="lv-icon-refresh" [lvColorState]="true"></i>
          </button>
        </lv-group>
        <div class="cluster-menus custom-cluster-menus">
          <lv-menu
            [lvMenus]="clusterMenus"
            [lvMode]="'icon'"
            [lvTheme]="'light'"
            [lvActiveItemId]="activeNode"
            [lvLabelTemplate]="clusterNodeTpl"
            (lvItemClick)="nodeChange($event)"
          ></lv-menu>
        </div>
      </lv-group>
      <div class="aui-block sftp-padding-none">
        <div class="aui-operation">
          <h2>{{getCurrentNodeName()}}</h2>
          <span *ngIf="sftpSwitch && !modifying">
            <lv-group lvGutter="4px" (click)="configSftp('modify')" class="aui-link">
              <img src="assets/img/setting.svg" />
              <span class="text-setting">{{'common_modify_label' | i18n}}</span>
            </lv-group>
          </span>
        </div>
        <div class="dashed-line aui-gutter-column-lg"></div>
        <div class="header-container aui-gutter-column-md">
          <lv-group lvGutter="8px">
            <h3>{{ 'system_sftp_label' | i18n }}</h3>
            <lv-switch
              [ngModel]="sftpSwitch"
              [lvControl]="true"
              [lvLoading]="loading"
              (click)="enableChange()"
              [lvDisabled]="loading || clickDisabled"
              pmpermission
              pmOperation="OpenSFTPService"
            >
            </lv-switch>
          </lv-group>
        </div>
        <ng-container *ngTemplateOutlet="openContentTpl"></ng-container>
        <ng-container *ngTemplateOutlet="closeContentTpl"></ng-container>
      </div>
    </lv-group>

    <div *ngIf="!isDataBackup">
      <ng-container *ngTemplateOutlet="openContentTpl"></ng-container>
      <ng-container *ngTemplateOutlet="closeContentTpl"></ng-container>
    </div>
  </div>
</div>

<ng-template #noDataTpl>
  <div class="node-no-data">
    <lv-empty></lv-empty>
  </div>
</ng-template>

<ng-template #nameFilterTpl>
  <lv-search
    [(ngModel)]="queryName"
    (lvSearch)="searchByName()"
    [lvFocus]="true"
  ></lv-search>
</ng-template>

<ng-template #tipContentTpl>
  <div [innerHTML]="switchOffContent"></div>
</ng-template>

<ng-template #clusterNodeTpl let-data>
  <lv-group lvDirection="vertical" lvGutter="4px">
    <div class="sub-title">
      {{ data.role | textMap: 'Target_Cluster_Role' }}
    </div>
    <div>{{ data.label }}</div>
    <aui-status
      *ngIf="
        data.status !== dataMap.Node_Status.setting.value &&
        data.status !== dataMap.Node_Status.deleting.value
      "
      [value]="data.status"
      type="Cluster_Status"
      class="sub-title"
    ></aui-status>
    <div
      *ngIf="data.status === dataMap.Node_Status.setting.value"
      lv-overflow
      class="delete-status sub-title"
    >
      <i lv-icon="aui-icon-loading" class="lv-m-rotate"></i>
      <span> {{ 'system_net_plane_setting_label' | i18n }}</span>
    </div>
    <div
      *ngIf="data.status === dataMap.Node_Status.deleting.value"
      lv-overflow
      class="delete-status sub-title"
    >
      <i lv-icon="aui-icon-loading" class="lv-m-rotate"></i>
      <span>{{ 'common_status_deleting_label' | i18n }}</span>
    </div>
  </lv-group>
</ng-template>

<ng-template #openContentTpl>
  <div *ngIf="sftpSwitch && !modifying">
    <h2 class="sftp-h2">{{ 'common_ip_address_label' | i18n }}</h2>
    <p class="node-adress">{{ sftpIp }}</p>
    <h2 class="sftp-h2">{{ 'system_authorized_user_label' | i18n }}</h2>
    <div class="aui-operation">
      <lv-group lvGutter="8px">
        <button
          lv-button
          lvType="primary"
          (click)="addUser(selection)"
          pmpermission
          pmOperation="AddSFTPUser"
        >
          {{ 'common_add_label' | i18n }}
        </button>
        <button
          lv-button
          (click)="deleteUsers(selection)"
          [disabled]="deleteBtnDisabled || !selection.length"
          pmpermission
          pmOperation="DeleteSFTPUser"
        >
          {{ 'common_delete_label' | i18n }}
        </button>
      </lv-group>
      <lv-group>
        <button
          lv-button
          lvSize="auto"
          (click)="refreshUser()"
          class="aui-button-icon"
        >
          <i lv-icon="lv-icon-refresh" [lvColorState]="true"></i>
        </button>
      </lv-group>
    </div>
    <div class="list-container">
      <lv-datatable
        #lvTable
        [lvData]="usersData"
        lvSelectionMode="multiple"
        [lvSelection]="selection"
        lvCompareWith="id"
        [lvScroll]="{ x: '100%' }"
        lvResizeMode="expand"
        lvResize
      >
        <thead>
          <tr>
            <th
              lvShowCheckbox
              width="64px"
              [lvRowsData]="lvTable.renderData"
              pmpermission
              pmOperation="DeleteSFTPUser"
            ></th>
            <ng-container *ngFor="let col of columns">
              <th *ngIf="col.key === 'username'">
                {{ col.label }}
                <i
                  *ngIf="col.key === 'username'"
                  lv-icon="lv-icon-search"
                  [lvColorState]="true"
                  [ngClass]="{ active: !!queryName }"
                  lv-popover
                  [lvPopoverContent]="nameFilterTpl"
                  lvPopoverPosition="bottom"
                  lvPopoverTrigger="click"
                  #namePopover="lvPopover"
                ></i>
              </th>
              <th *ngIf="col.key !== 'username'">
                {{ col.label }}
              </th>
            </ng-container>
            <th width="140px">{{ 'common_operation_label' | i18n }}</th>
          </tr>
        </thead>
        <tbody>
          <ng-container
            *ngFor="let item of lvTable.renderData; trackBy: trackByUuid"
          >
            <tr>
              <td
                lvShowCheckbox
                [lvRowData]="item"
                width="64px"
                pmpermission
                pmOperation="DeleteSFTPUser"
              ></td>
              <ng-container *ngFor="let col of columns">
                <td>
                  <ng-container [ngSwitch]="col.key">
                    <ng-container *ngSwitchDefault>
                      <span
                        class="aui-link"
                        id="outerClosable"
                        (click)="getDetail(item)"
                        lv-overflow
                      >
                        {{ item.username }}
                      </span>
                    </ng-container>
                    <ng-container *ngSwitchCase="'limitSpaceQuota'">
                      {{
                        item.limitSpaceQuota
                          | capacityCalculateLabel: '1.1-3':unitconst.BYTE:true
                      }}
                    </ng-container>
                  </ng-container>
                </td>
              </ng-container>
              <td width="140px">
                <lv-operation-menu
                  [lvData]="item"
                  [lvItemsFn]="optsCallback"
                  lvMenuText="{{ 'common_more_label' | i18n }}"
                >
                </lv-operation-menu>
              </td>
            </tr>
          </ng-container>
        </tbody>
      </lv-datatable>
    </div>
    <div class="aui-paginator-wrap">
      <lv-paginator
        [lvPageSize]="pageSize"
        [lvTotal]="total"
        [lvPageIndex]="pageIndex"
        [lvPageSizeOptions]="sizeOptions"
        [hidden]="total === 0"
        (lvPageChange)="pageChange($event)"
      >
      </lv-paginator>
    </div>
  </div>
</ng-template>

<ng-template #closeContentTpl>
  <div class="sftp-no-data aui-block" *ngIf="!sftpSwitch || modifying">
    <div [ngStyle]="{ display: isLoading ? 'block' : 'none' }">
      <aui-process-loading
        (onComplete)="onComplete($event)"
      ></aui-process-loading>
    </div>
  </div>
</ng-template>
